<template>
  <div>
    <!-- <a-button type="link" ghost @click="currentDay">今日</a-button>
    <a-button type="link" ghost @click="currentWeek">本周</a-button>
    <a-button type="link" ghost @click="currentMonth">本月</a-button>
    <a-button type="link" ghost @click="currentYear">全年</a-button> -->
    <span :class="timeChosed === 1 ? 'timeChosed' : ''" @click="currentDay">今日</span>
    <span :class="timeChosed === 2 ? 'timeChosed' : ''" @click="currentWeek">本周</span>
    <span :class="timeChosed === 3 ? 'timeChosed' : ''" @click="currentMonth">本月</span>
    <span :class="timeChosed === 4 ? 'timeChosed' : ''" @click="currentYear">全年</span>
    <a-range-picker style="width:220px" @change="timeChange" :value="value" />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'today-to-year',
  data () {
    return {
      value: [],
      timeChosed: 1
    }
  },
  computed: {},
  methods: {
    getMonthStartAndEnd (AddMonthCount) {
      // 起止日期数组
      var startStop = []
      // 获取当前时间
      var currentDate = new Date()
      var month = currentDate.getMonth() + AddMonthCount
      if (month < 0) {
        var n = parseInt(-month / 12)
        month += n * 12
        currentDate.setFullYear(currentDate.getFullYear() - n)
      }
      currentDate = new Date(currentDate.setMonth(month))
      // 获得当前月份0-11
      var currentMonth = currentDate.getMonth()
      // 获得当前年份4位年
      var currentYear = currentDate.getFullYear()
      // 获得上一个月的第一天
      var currentMonthFirstDay = new Date(currentYear, currentMonth, 1)
      // 获得上一月的最后一天
      var currentMonthLastDay = new Date(currentYear, currentMonth + 1, 0)
      // 添加至数组
      startStop.push(this.getDateStr(currentMonthFirstDay))
      startStop.push(this.getDateStr(currentMonthLastDay))
      // 返回
      return startStop
    },
    getDateStr (date) {
      var year = ''
      var month = ''
      var day = ''
      var now = date
      year = '' + now.getFullYear()
      if (now.getMonth() + 1 < 10) {
        month = '0' + (now.getMonth() + 1)
      } else {
        month = '' + (now.getMonth() + 1)
      }
      if (now.getDate() < 10) {
        day = '0' + now.getDate()
      } else {
        day = '' + now.getDate()
      }
      return year + '-' + month + '-' + day
    },
    getFullYear () {
      let fullYear = []
      fullYear.push(`${new Date().getFullYear()}-01-01`)
      fullYear.push(`${new Date().getFullYear()}-12-31`)
      return fullYear
    },
    getCurrentDay () {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    getCurrentWeek () {
      var now = new Date()
      var nowTime = now.getTime()
      var day = now.getDay()
      var oneDayLong = 24 * 60 * 60 * 1000

      var MondayTime = nowTime - (day - 1) * oneDayLong
      var SundayTime = nowTime + (7 - day) * oneDayLong

      var monday = this.getDateStr(new Date(MondayTime))
      var sunday = this.getDateStr(new Date(SundayTime))
      return [monday, sunday]
    },
    timeChange (date, dateString) {
      this.value = date
      this.timeChosed = 0
      if (dateString[0] && dateString[1]) {
        this.returnDates('', dateString[0], dateString[1])
      }
    },
    currentDay () {
      let today = this.getCurrentDay()
      this.value = [moment(today), moment(today)]
      this.timeChosed = 1
      this.returnDates(1, today, today)
    },
    currentWeek () {
      let thisWeek = this.getCurrentWeek()
      this.value = [moment(thisWeek[0]), moment(thisWeek[1])]
      this.timeChosed = 2
      this.returnDates(2, thisWeek[0], thisWeek[1])
    },
    currentMonth () {
      let thisMonth = this.getMonthStartAndEnd(0)
      this.value = [moment(thisMonth[0]), moment(thisMonth[1])]
      this.timeChosed = 3
      this.returnDates(3, thisMonth[0], thisMonth[1])
    },
    currentYear () {
      let thisYear = this.getFullYear()
      this.value = [moment(thisYear[0]), moment(thisYear[1])]
      this.timeChosed = 4
      this.returnDates(4, thisYear[0], thisYear[1])
    },
    returnDates (dateType, startTime, endTime) {
      this.$emit('change', dateType, startTime, endTime)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.currentDay()
      // this.currentYear()
    })
  }
}
</script>

<style scoped>
/* .ant-btn-background-ghost.ant-btn-link {
  color: #1890ff;
  color: #666;
}
.ant-btn-background-ghost.ant-btn-link:hover,
.ant-btn-background-ghost.ant-btn-link:focus {
  color: #40a9ff;
  background-color: transparent;
  border-color: transparent;
} */
span {
  cursor: pointer;
  margin: 0 10px;
}
span.timeChosed {
  color: #1890ff;
}
</style>
